<template>
  <div class="relative overflow-hidden text-16px">
    <div class="main-bg"></div>
    <div class="z-9 flex flex-center flex-col w-full min-h-20vh py-32px text-white relative">
      <span class="text-32px">订单广场</span>
      <span class="text-16px my-0.5rem">让订单更简单！</span>
      <div class="max-w-80vw w-20rem">
        <el-input
          v-model="search.content"
          placeholder="优质订单等你来搜！"
          class="w-full h-32px bg-transparent"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>
  </div>
  <div class="w-full p-0.5rem bg-[#eee] z-9 relative text-16px">
    <span class="0.75rem font-bold">产业链分类</span>
    <div class="w-full mt-0.5rem mb-16px">
      <swiper
        :loop="true"
        :modules="[Navigation, Autoplay]"
        slidesPerView="2"
        :autoplay="{ delay: 2000, disableOnInteraction: false }"
      >
        <swiper-slide
          v-for="(item, index) in categoryList"
          :key="index"
          class="px-8px"
          @click="$router.push('/ordersquare/list')"
        >
          <div class="relative">
            <img :src="item.mainImage" class="w-full aspect-video object-contain" />
            <div
              class="absolute w-full aspect-video bg-black bg-opacity-40 flex flex-center px-10px rounded-0.25rem pointer left-0 top-0px"
              @click="toPath('/ordersquare/list')"
            >
              <span class="text-white text-16px text-center">{{ item.name }}</span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <span class="0.75rem font-bold">精选订单</span>
    <div class="w-full mt-16px mb-16px">
      <Menu :menuIndex="0" :path="'/ordersquare/detail'" />
      <Menu :menuIndex="1" :path="'/ordersquare/detail'" />
      <Menu :menuIndex="2" :path="'/ordersquare/detail'" />
      <Menu :menuIndex="3" :path="'/ordersquare/detail'" />
      <Menu :menuIndex="4" :path="'/ordersquare/detail'" />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onActivated } from 'vue'
import { useConfigStore } from '@/stores/config'
import 'swiper/css'
import 'swiper/css/autoplay'
import 'swiper/css/navigation'
import { Autoplay, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import Menu from './components/leftDetail.vue'

const categoryList = ref([])

const search = reactive({
  type: 1,
  content: '',
})

const init = async () => {
  const config = useConfigStore()
  categoryList.value = await config.initChainTree()
  console.log(categoryList.value)
}

init()

onActivated(() => {
  init()
})
</script>

<style lang="scss" scoped>
.main-bg {
  position: absolute;
  background-image: url(@/assets/image/communication2.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: 0;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    background: linear-gradient(to right, #1e2125, #323a46);
  }
}
</style>
